<template>
    <div class="window video-meeting" v-show="show">
        <div class="title">
            视频会议
            <i class="el-icon-close" @click="show=false"></i>
        </div>
        <div class="body">
            <div class="person-list">
                <div class="deal" v-show="mail_edit">
                    <button class="finish" @click="finish">完成</button>
                    <button class="cancel" @click="mail_edit=false">取消</button>
                </div>
                <div class="deal" v-show="!mail_edit">
                    <i class="el-icon-circle-plus" @click="mail_edit=true"></i>
                    <div>
                        <i class="el-icon-microphone" @click="allSpeakToggle(2)"></i>
                        <i class="el-icon-turn-off-microphone" style="color: red" @click="allSpeakToggle(1)"></i>
                    </div>
<!--<el-checkbox v-model="show_online">只显示在线人员</el-checkbox>-->
                </div>
                <div class="list">
                    <div class="search" v-show="!mail_edit">
                        <input type="text">
                        <i class="el-icon-search"></i>
                    </div>
                    <h1 v-show="!mail_edit">
                        当前会议人数
                        ( <b>{{(meeting_person && meeting_person.length)|| 0}}</b> )
                        <!--<i class="el-icon-microphone" @click="toggleMic(2)"></i>
                        <i class="el-icon-turn-off-microphone" @click="toggleMic(1)"></i>-->
                    </h1>
                    <el-tree ref="tree" v-show="mail_edit" :data="mail_person" show-checkbox node-key="index"
                             default-expand-all :expand-on-click-node="false">
                        <span class="custom-tree-node" slot-scope="{ node, data }">
                            <span>{{ data.displayName }}</span>
                        </span>
                    </el-tree>
                    <ul v-show="!mail_edit" class="tree">
                        <li v-show="(show_online && x.online==1) || !show_online" :key="i" v-for="(x,i) in meeting_person">{{x.name}}
                            <div>
                                <i class="el-icon-turn-off-microphone" v-show="x.mute==1" @click="speakToggle(x)"></i>
                                <i class="el-icon-microphone" v-show="x.mute==0" @click="speakToggle(x)"></i>
                                <i class="el-icon-circle-close" @click="kick(x,i)"></i>
                            </div>
                        </li>
                    </ul>
                    <!-- <button class="off" @click="stopMeeting"><i class="el-icon-switch-button"></i> 结束会议</button>-->
                </div>
            </div>
            <div class="videos">
                <div class="h1">
                    <h1>广州市黄埔区“另行禁止、有呼必应”</h1>
                    <div class="line"></div>
                    <p>综合指挥调度</p>
                </div>
                <video autoplay v-show="src" ref="meetingVideo"></video>
                <div class="no-data" v-show="!src" v-loading="loading" element-loading-spinner="el-icon-loading"
                     element-loading-background="rgba(0, 0, 0, 0)" element-loading-text="暂无人员入会">
                    <!-- 暂无人员入会 -->

                </div>
                <!--<button class="off" @click="stopMeeting"><i class="el-icon-switch-button"></i> 结束会议</button>-->
                <button v-show="src" class="off" @click="show=false"><i><img src="../assets/images/ringoff.png" alt=""></i>
                    挂断
                </button>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import 'video.js/dist/video-js.css'
    import 'videojs-flash'
    import flv from '../assets/js/flv.min'

    export default {
        data() {
            return {
                player: {},
                src: '',
                show_online: false,
                show: false,
                meeting_person: [],
                id: '',
                mail_person: [],
                mail_edit: false,
                timer: '',
                loading: true,
            }
        },
        created() {
            this.$axios.videoRecording().then(v => {
                if (v.resultCode == 200) {
                    this.mail_person = v.data.map((x, i) => {
                        x.index = i;
                        return x
                    })
                }
            });
        },
        methods: {
            finish() {
                let arr = this.$refs.tree.getCheckedNodes();
                arr = arr.map(x => {
                    delete x.index;
                    return x
                });
                if (arr.length > 0) {
                    let load = this.$loading({
                        lock: true,
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, .7)'
                    });
                    this.$axios.addMeeting({CONFERENCEID: this.id, USERS: arr}).then(v => {
                        load.close();
                        if (v.resultCode == 200) {
                            this.mail_edit = false;
                        } else {
                            this.$message.error(v.resultMsg)
                        }
                    })
                }
            },
            kick(x, i) {
                this.$axios.kick({CONFERENCEID: this.id, id: x.id}).then(v => {
                    if (v.resultCode == 200) {
                        this.$message.success(v.resultMsg);
                        this.meeting_person.splice(i, 1)
                    } else {
                        this.$message.error(v.resultMsg)
                    }
                })
            },
            allSpeakToggle(x){//1:禁言 2：解禁
                this.$axios.allSpeakToggle({CONFERENCEID: this.id,TYPE:x}).then(v=>{
                    if (v.resultCode == 200) {
                        this.$message.success(v.resultMsg);
                    }else{
                        this.$message.error(v.resultMsg)
                    }
                })
            },
            speakToggle(x) {
                this.$axios.speakToggle({CONFERENCEID: this.id, ID: x.id, TYPE: x.mute == 1 ? 2 : 1}).then(v => {
                    if (v.resultCode == 200) {
                        this.$message.success(v.resultMsg);
                        x.mute = x.mute == 1 ? 0 : 1
                    } else {
                        this.$message.error(v.resultMsg)
                    }
                })
            },
            //入会成员
            meetingPerson() {
                if (!this.id) return;
                this.$axios.meetingPerson({CONFERENCEID: this.id}).then(v => {
                    if (v.resultCode == 200) {
                        this.meeting_person = v.data
                    }
                })
            },
            //创建会议
            meetingCreate(person, call) {
                this.$axios.meetingCreate().then(v => {
                    if (v.resultCode == 200) {
                        this.id = v.data.conferenceid;
                        if (person) call(this.id);
                        this.src = v.data.mrl;
                        this.loading = false;
                        this.player = flv.createPlayer({
                            url: this.src,
                            isLive: true,
                            cors: true,
                            type: 'flv'
                        });
                        this.$nextTick(e => {
                            this.player.attachMediaElement(this.$refs.meetingVideo)
                            this.player.load()
                            this.player.play();
                            this.timer = setInterval(() => {
                                this.meetingPerson();
                            }, 5000)
                        })
                    } else {
                        this.$message.error(v.resultMsg)
                    }
                })
            },
            //停止会议
            stopMeeting() {
                let load = this.$loading({
                    lock: true,
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, .7)'
                });
                clearInterval(this.timer);
                this.$axios.stopMeeting({CONFERENCEID: this.id}).then(v => {
                    load.close();
                    if (v.resultCode == 200) {
                        this.$message(v.resultMsg);
                        this.meeting_person = [];
                        this.id = '';
                        this.show = false;
                        this.src = '';
                        this.mail_edit = false;
                        console.log(this.player)
                        this.player.stop();
                    } else {
                        this.$message.error(v.resultMsg)
                    }
                })
            }
        },
        watch: {
            show(v) {
                if (!v) {
                    this.stopMeeting();
                }
            }
        }
    }
</script>
<style lang="less" rel="stylesheet/less">
    .video-meeting {
        .body {
            overflow: hidden;

            .person-list {
                width: 200px*@ratio;
                float: left;
                height: 100%;
                background: #121b23;

                .el-checkbox {
                    font-size: 14px*@ratio;
                    margin-right: 8px*@ratio !important;

                    .el-checkbox__input {
                        vertical-align: initial;
                    }

                    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
                        background-color: #0080fc;
                        border-color: #0346ac;
                    }

                    .el-checkbox__label {
                        padding-left: 10px*@ratio;
                        line-height: 19px*@ratio;
                        font-size: 14px*@ratio;
                    }

                    .el-checkbox__inner {
                        border-radius: 0;
                        border-width: 1px*@ratio !important;
                        width: 12px*@ratio;
                        height: 12px*@ratio;

                        &::after {
                            border: 2px*@ratio solid #FFF;
                            height: 6px*@ratio;
                            left: 3px*@ratio;
                            top: 0;
                            width: 2px*@ratio;
                            border-left: 0;
                            border-top: 0;
                        }
                    }
                }

                .deal {
                    height: 50px*@ratio;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 0 10px*@ratio;
                    background: #0c2c4a;
                    color: #0693d0;
                    font-size: 23px*@ratio;

                    i {
                        cursor: pointer;
                    }

                    button {
                        cursor: pointer;
                        border: 0;
                        height: 32px*@ratio;
                        border-radius: 4px*@ratio;
                        color: #fff;
                        font-size: 12px*@ratio;
                        width: 95px*@ratio;
                        margin: 0 5px*@ratio;
                        background: #0346ac;

                        &.cancel {
                            background: #06357a;
                        }
                    }
                }

                .list {
                    padding: 0 10px*@ratio;

                    *::-webkit-scrollbar {
                        background: none;
                        width: 8px*@ratio;
                        height: 8px*@ratio;
                    }

                    *::-webkit-scrollbar-thumb {
                        background: #404f68;
                        border-radius: 4px*@ratio;
                    }

                    .search {
                        height: 20px*@ratio;
                        background: #fff;
                        border-radius: 4px;
                        padding: 0 10px;
                        margin: 10px*@ratio 0 15px*@ratio;

                        input {
                            border: 0;
                            height: 100%;
                            width: 130px*@ratio;
                            float: left;
                            display: block;
                            background: none;
                            outline: none;
                            font-size: 13px*@ratio;
                            margin-right: 15px*@ratio;
                        }

                        .el-icon-search {
                            font-size: 14px*@ratio;
                            color: #4166b0;
                            font-weight: bold;
                            line-height: 20px*@ratio;
                        }
                    }

                    h1 {
                        color: #fff;
                        font-size: 12px*@ratio;
                        margin: 0 0 10px*@ratio;

                        b {
                            color: red;
                        }
                    }

                    .tree {
                        height: 300px*@ratio;
                        font-size: 12px*@ratio;
                        padding: 0 3px*@ratio;
                        overflow: auto;

                        li {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            height: 25px*@ratio;
                            color: rgba(255, 255, 255, .6);

                            i {
                                color: #fff;
                                cursor: pointer;
                                font-size: 14px*@ratio;
                            }
                        }
                    }

                    .el-tree {
                        margin: 15px*@ratio 0 0;
                        height: 350px*@ratio;
                        font-size: 10px*@ratio;
                        overflow: auto;
                        background: none;
                        color: rgba(255, 255, 255, .6);

                        .el-tree-node__content > .el-tree-node__expand-icon {
                            padding: 6px*@ratio;
                        }

                        .el-tree-node__expand-icon {
                            font-size: 12px*@ratio;
                        }

                        .el-tree-node__content {
                            height: 26px*@ratio;
                            background: none !important;
                        }
                    }

                    /*  .off {
                          cursor: pointer;
                          outline: none;
                          width: 100px*@ratio;
                          height: 30px*@ratio;
                          display: flex;
                          align-items: center;
                          justify-content: center;
                          margin: 10px*@ratio auto 0;
                          border: 0;
                          border-radius: 4px*@ratio;
                          font-size: 12px*@ratio;
                          background: red;
                          color: #fff;

                          i {
                              font-weight: bold;
                              font-size: 18px*@ratio;
                              margin: 0 10px*@ratio 0 0;
                          }
                      }*/
                }
            }

            .videos {
                @a: 200px*@ratio;
                width: calc(~'100% - ' @a);
                height: 100%;
                padding: 15px*@ratio;
                overflow: hidden;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                background-color: #223241;

                .h1 {
                    width: 100%;
                    position: relative;
                    margin-bottom: 20px*@ratio;

                    h1 {
                        font-size: 22px*@ratio;
                        color: white;
                        font-weight: bold;
                        text-align: center;
                        margin-top: 0px*@ratio;
                    }

                    p {
                        font-size: 20px*@ratio;
                        color: white;
                        font-weight: bold;
                        text-align: center;
                        width: 30%;
                        height: 30px;
                        line-height: 30px;
                        position: absolute;
                        // background-color: #223241;
                        top: 47px*@ratio;
                        left: 35%;
                        background: #223241;
                        padding: 0 10px*@ratio;
                    }

                    .line {
                        width: 90%;
                        border-bottom: 1px*@ratio solid white;
                        height: 30px*@ratio;
                        margin-left: 5%;
                    }
                }

                .video-player, .video-js {
                    width: 100%;
                    height: 100%;
                }

                .off {
                    cursor: pointer;
                    outline: none;
                    /*  width: 50px*@ratio;
                      height: 80px*@ratio;*/
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    border: 0;
                    /*background: red;*/
                    background: none;
                    color: #fff;
                    font-size: 16px*@ratio;

                    i {
                        font-weight: bold;
                        /*font-size: 30px*@ratio;*/
                        width: 40px*@ratio;
                        height: 40px*@ratio;
                        margin-bottom: 10px*@ratio;

                        img {
                            width: 100%;
                        }
                    }
                }

                video, object {
                    width: 100%;
                    height: 100%;
                    object-fit: fill;
                    /*width: 410px@ratio;
                    height: 230px@ratio;*/
                    background: #aaa;
                    margin-bottom: 20px*@ratio;
                }

            }

            .no-data {
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 25px*@ratio;
                color: #aaa;
                background: url(../assets/images/no-video.png) no-repeat center/100% 100%;
                .el-loading-spinner{
                    i{
                        color:#fff
                    }
                    .el-loading-text{
                        font-size: 20px*@ratio;
                        color: white;
                        font-weight: bold;
                        margin: 3px*@ratio 0;
                    }
                }
            }
        }
    }
</style>
